<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.min.css">
    <script src="static/axios/axios.min.js"></script>
    <style>
        body {
            height: 100vh;
            background-image: url("static/images/bg.jpg");
            background-size: cover;
        }

        .card {
            width: 20rem;
            background-color: rgb(232, 229, 240);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .text-success {
            color: green;
        }

        .text-danger {
            color: red;
        }

        .text-warning {
            color: orange;
        }
    </style>
</head>

<body>
<div class="card shadow-lg">
    <div class="card-body">
        <h5 class="card-title mb-3 text-center">注册</h5>
        <form>
            <div class="form-group mb-3">
                <label>用户名</label>
                <input name="username" type="text" id="username" class="form-control" placeholder="请输入用户名">
                <small id="usernameHelp" class="form-text text-muted" hidden>用户名不能为空</small>
            </div>
            <div class="form-group mb-3">
                <label>邮件</label>
                <input name="email" type="email" id="email" class="form-control" placeholder="请输入邮件地址">
                <small id="emailHelp" class="form-text text-muted" hidden>邮箱格式不正确</small>
            </div>
            <div class="form-group mb-3">
                <label>密码</label>
                <input name="password" type="password" id="password" class="form-control" placeholder="请输入密码">
                <small id="pwdHelp" class="form-text text-muted" hidden>密码长度必须大于等于6位</small>
            </div>
            <div class="form-group mb-3">
                <label>重复密码</label>
                <input name="repeat-password" type="password" id="repeat-password" class="form-control" placeholder="请再次输入密码">
                <small id="repeatPwdHelp" class="form-text text-danger" hidden>两次输入的密码不一致</small>
            </div>
            <button type="submit" id="registerBtn" class="btn btn-primary w-100 mb-3">注册</button>
            <p class="text-end text-muted mb-0">已有账号? <a href="/login.html">登录</a></p>
        </form>
    </div>
</div>
<script>
    function tip(element, message, visible, status) {
        element.innerHTML = message;
        element.hidden = !visible;
        element.className = 'form-text ' + status;
    }

    const usernameHelp = document.getElementById('usernameHelp');
    const emailHelp = document.getElementById('emailHelp');
    const pwdHelp = document.getElementById('pwdHelp');
    const repeatPwdHelp = document.getElementById('repeatPwdHelp');

    const registerBtn = document.getElementById('registerBtn');
    const username = document.getElementById('username');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const repeatPassword = document.getElementById('repeat-password');

    registerBtn.addEventListener('click', function(event) {
        event.preventDefault();

        const usernameVal = username.value;
        const emailVal = email.value;
        const pwd = password.value;
        const repwd = repeatPassword.value;

        const url = 'http://localhost:8080/register';
        var params = new URLSearchParams();
        params.append('username', usernameVal);
        params.append('email', emailVal);
        params.append('password', pwd);

        if (checkParams(usernameVal, emailVal, pwd, repwd)) {
            axios.post(url, params)
                .then(function (response) {
                    alert(response.data.message);
                    window.location.href = '/index.html';
                })
                .catch(function (error) {
                    alert(error);
                });
        }
    });

    function checkParams(usernameVal, emailVal, pwd, repwd) {
        let flag = true;

        // 用户名验证：非空，长度6-16，字母数字下划线
        if (!usernameVal || !/^[a-zA-Z0-9_]{6,16}$/.test(usernameVal)) {
            tip(usernameHelp, '用户名不能为空，长度6-16，仅包含字母数字下划线', true, 'text-danger');
            flag = false;
        } else {
            tip(usernameHelp, '用户名格式正确', true, 'text-success');
        }

        // 邮箱验证：标准邮箱格式
        if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(emailVal)) {
            tip(emailHelp, '邮箱格式不正确', true, 'text-danger');
            flag = false;
        } else {
            tip(emailHelp, '邮箱格式正确', true, 'text-success');
        }

        // 密码验证：长度大于等于6
        if (pwd.length < 6) {
            tip(pwdHelp, '密码长度必须大于等于6位', true, 'text-danger');
            flag = false;
        } else {
            tip(pwdHelp, '密码长度符合要求', true, 'text-success');
        }

        // 重复密码验证
        if (pwd !== repwd) {
            tip(repeatPwdHelp, '两次输入的密码不一致', true, 'text-danger');
            flag = false;
        } else {
            tip(repeatPwdHelp, '密码一致', true, 'text-success');
        }

        return flag;
    }
</script>
</body>

</html>